<template>
  <div class="echart_view"  ref="nesting">
  </div>
</template>
<script>
export default {
  data() {
    return {
      charts: '',
      //内部图
      insideList: [
        {value: 1548, name: '路线总数'},
      ],
      //外部图
      externalList: [
        {value: 335, name: '国道'},
        {value: 310, name: '省道'},
        {value: 251, name: '县道'},
        {value: 234, name: '乡道'},
        {value: 147, name: '村道'},
        {value: 135, name: '专用公路'},
      ],
      insideName: '',
      externalName: '',
      title: '',
    }
  },
  computed: {
    options() {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}'
        },
        title: {
            text: this.title,
            textStyle: {
              color: '#000000',
              fontSize: 12,
            },
          },
        legend: {
          data: []
        },
        series: [
          {
            name: this.insideName,
            type: 'pie',
            color: ['#ffffff'],
            selectedMode: 'single',
            radius: [0, '40%'],
            label: {
              normal: {
                show: true,
                position: 'center', //标签的位置
                textStyle: {
                  color: '#000000',
                  fontWeight: 300,
                  fontSize: 15    //文字的字体大小
                },
                formatter: '{c}\n{a}',
              }
            },
            labelLine: {
              show: false
            },
            data: this.insideList
          },
          {
            padding: [20, 20],
            name: this.externalName,
            type: 'pie',
            radius: ['40%', '70%'],
            startAngle: 270, //起始角度
            minAngle: 10,
            labelLine: {
              length: 5
            },
            label: {
              formatter: '{b|{b}} {per|{c}}  ',
              backgroundColor: '#ffffff',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,
              padding: [3, 2],
              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 12,
                  align: 'center',

                },
                b: {
                  color: '#4C5058',
                  fontSize: 12,
                  fontWeight: 'bold',
                  lineHeight: 12
                },
                per: {
                  color: '#5dfff6',
                  backgroundColor: '#4C5058',
                  fontSize: 12,
                  padding: 2,
                }
              }
            },
            data: this.externalList
          }
        ]
      }
    }
  },
  methods: {
    updateEchart(title, insideList, externalList, insideName, externalName) {
      this.title = title
      this.externalList = externalList
      this.insideList = insideList
      this.insideName = insideName
      this.externalName = externalName
      this.charts.setOption(this.options)
      this.charts.resize()
    },
    // echart随着窗口改变
    echartResize() {
      this.charts.resize()
    },
  },
  mounted() {
    const Echarts = require('echarts')
    this.charts = Echarts.init(this.$refs.nesting, null, {locale: 'ZH'})
  },
}
</script>
<style lang="less" scoped>
  .echart_view{
    height: 250px;
    animation: fade_bottom 1.5s;
    @keyframes fade_bottom {
      from {
        transform: translateY(30px);
        opacity: 0.2;
      }
      to {
        transform: translateY(0px);
        opacity: 0.9;
      }
    }
  }
</style>
